<template>
  <div>
    <SkyCardPanel title="分页组件">
      <div slot="main" class="containter-form">
        <sky-form :model="form" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="多选下拉框" class="col_24">
              <sky-point-page :page-config="form.pageConfigTotal" @changeCurrentPage="changePage1" @sizeChange="handleSizeChange1"></sky-point-page>
            </sky-form-item>
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="多选下拉框" class="col_24">
              <sky-point-page sky-point-page :page-config="form.pageConfigPageTotal" @changeCurrentPage="changePage2" @sizeChange="handleSizeChange2"></sky-point-page>
            </sky-form-item>
          </div>
        </sky-form>
      </div>

    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
        <code class="html">
            分页

            &lt;sky-point-page :page-config="form.pageConfigTotal" @changeCurrentPage="changePage1" @sizeChange="handleSizeChange1"&gt;&lt;/sky-point-page&gt;           
            
            &lt;sky-point-page :page-config="form.pageConfigPageTotal" @changeCurrentPage="changePage2" @sizeChange="handleSizeChange2"&gt;&lt;/sky-point-page&gt;
      
        </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              分页

              export default {
                data () {
                  return {
                    form:{
                    pageConfigTotal: { total: 21, pageSize: 10, pageNo: 1 },
                    pageConfigPageTotal: { total: 510, pageSize: 10, pageNo: 1 },
                    }
                  }
                },
                methods: {
                  changePage1 (page) {
                    console.log(page)
                  },
                  handleSizeChange1 (pagelist) {
                    console.log(pagelist)
                  },
                  changePage2 (page) {
                    console.log(page)
                  },
                  handleSizeChange2 (pagelist) {
                    console.log(pagelist)
                  },
                }
              }
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="小型翻页">
      <div slot="main" class="containter-form">
        <sky-form :model="form" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="多选下拉框" class="col_24">
              <sky-point-page micro :page-config="form.pageConfigPagemicro" @changeCurrentPage="microchangePage"></sky-point-page>
            </sky-form-item>
          </div>
        </sky-form>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              小型分页

              &lt;sky-point-page micro :page-config="form.pageConfigPagemicro" @changeCurrentPage="microchangePage"&gt;&lt;/sky-point-page&gt;
        
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              小型分页

              export default {
                data () {
                  return {
                    form:{
                    // 小型翻页
                    pageConfigPagemicro: { total: 100, pageSize: 10, pageNo: 1 },
                    }
                  }
                },
                methods: {
                  // 小型翻页
                  microchangePage (page) {
                    console.log(page)
                  }
                }
              }
        
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          pageConfigTotal: { total: 21, pageSize: 10, pageNo: 1 },
          pageConfigPageTotal: { total: 510, pageSize: 10, pageNo: 1 },
          // 小型翻页
          pageConfigPagemicro: { total: 100, pageSize: 10, pageNo: 1 },

        },
      }
    },
    methods: {
      changePage1 (page) {
        console.log(page)
      },
      handleSizeChange1 (pagelist) {
        console.log(pagelist)
      },
      changePage2 (page) {
        console.log(page)
      },
      handleSizeChange2 (pagelist) {
        console.log(pagelist)
      },
      // 小型翻页
      microchangePage (page) {
        console.log(page)
      }
    }
  }
</script>

